<template>
  <div id="app-container">
    <!--条件查询表单-->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="巡检员">
        <el-input v-model="queryInspectorDTO.inspectorName" placeholder="巡检员名称"/>
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="queryInspectorDTO.inspectorPhone" placeholder="手机号码"/>
      </el-form-item>
      <el-form-item label="管理路段">
        <el-input v-model="queryInspectorDTO.roadName" placeholder="管理路段"/>
      </el-form-item>
      <el-button type="primary" icon="el-icon-search" @click="getList()">查询</el-button>
      <el-button type="default" @click="resetData()">清空</el-button>
      <el-button type="primary" icon="el-icon-plus" @click="dialogVisible = true">新建</el-button>
    </el-form>

    <!--数据显示列表-->
    <el-table :data = "dataList" fit highlight-current-row>
      <el-table-column type="index" label="序号" width="70">
        <template slot-scope="scope">
          <span>{{ (currentPage - 1) * pageSize + scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="inspectorName" label="巡检员名称" width="100"/>
      <el-table-column prop="inspectorPhone" label="手机号码" width="100"/>
      <el-table-column prop="managementSection" label="管理路段" width="300"/>
      <el-table-column prop="dutyTime" label="执勤时间" width="120"/>
      <el-table-column prop="status" label="状态" width="80">
        <template slot-scope="scope">
          <span v-if="scope.row.status == '0'">正常</span>
          <span v-if="scope.row.status == '1'">禁用中</span>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="180"/>
      <el-table-column label="操作" width="350">
        <template slot-scope="scope">
          <el-button type="primary" style="margin-left: 10px;" size="small" @click="handledsaveOrUpdate(scope.row.id)">编辑</el-button>
          <el-button type="primary" style="margin-left: 10px;" size="small" @click="handledetails(scope.row.id)">账号详情</el-button>
          <el-dropdown trigger="click">
            <el-button type="primary" size="small" style="margin-left: 10px;">
              更多菜单
              <i class="el-icon-arrow-down el-icon--right"/>
            </el-button>
            <el-dropdown-menu size="small">
              <el-button type="danger" size="small" icon="el-icon-paperclip" @click="handleRemove(scope.row.id,0)">恢复</el-button>
              <el-button type="danger" size="mini" icon="el-icon-delete" @click="handleRemove(scope.row.id,1)">禁用</el-button>
              <el-button type="danger" size="mini" icon="el-icon-delete" @click="handledelete(scope.row.id)">删除</el-button>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>

    <el-drawer
      :direction="direction"
      :visible.sync="drawer"
      title="基础信息"
      size="50%">
      <el-descriptions :column="2" class="margin-top" border>
        <el-descriptions-item>
          <template slot="label"><i class="el-icon-user"/>巡检员名称</template>
          {{ this.QueryInspectorVO.inspectorName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"><i class="el-icon-mobile-phone"/>手机号码</template>
          {{ this.QueryInspectorVO.inspectorPhone }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"><i class="el-icon-location-outline"/>管理路段</template>
          {{ this.QueryInspectorVO.managementSection }}
        </el-descriptions-item>
        <el-descriptions-item><template slot="label"><i class="el-icon-tickets"/>执勤时间</template>
          {{ this.QueryInspectorVO.dutyTime }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"><i class="el-icon-office-building"/>状态</template>
          <span v-if="QueryInspectorVO.status == '0'">正常</span>
          <span v-if="QueryInspectorVO.status == '1'">禁用中</span>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"><i class="el-icon-office-building"/>创建时间</template>
          {{ this.QueryInspectorVO.createTime }}
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions :column="1" class="margin-top" border>
        <el-descriptions-item>
          <template slot="label">录入的订单数</template>
          {{ this.inspectorDetailedStatisticsVO.numberOrdersEntered }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">已完成的订单数</template>
          {{ this.inspectorDetailedStatisticsVO.numberOrdersCompleted }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">申述中订单数</template>
          {{ this.inspectorDetailedStatisticsVO.orderComplaintIng }}
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions>
        <el-descriptions-item>
          <el-table :data = "inspectorOrderList" fit highlight-current-row>
            <el-table-column type="index" label="序号" width="70">
              <template slot-scope="scope">
                <span>{{ (currentPage - 1) * pageSize + scope.$index + 1 }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="orderCode" label="订单编号" width="180"/>
            <el-table-column prop="roadName" label="路段名称" width="180"/>
            <el-table-column prop="carNumber" label="车牌号码" width="100"/>
            <el-table-column prop="price" label="订单金额" width="130"/>
            <el-table-column prop="orderStatus" label="订单状态" width="130">
              <template slot-scope="scope">
                <span v-if="scope.row.orderStatus == '1'">进行中</span>
                <span v-if="scope.row.orderStatus == '2'">待支付</span>
                <span v-if="scope.row.orderStatus == '3'">已支付</span>
                <span v-if="scope.row.orderStatus == '4'">已完成</span>
                <span v-if="scope.row.orderStatus == '5'">申述中</span>
                <span v-if="scope.row.orderStatus == '6'">申述失败</span>
                <span v-if="scope.row.orderStatus == '7'">已退款</span>
              </template>
            </el-table-column>
          </el-table>
        </el-descriptions-item>
      </el-descriptions>
    </el-drawer>
    <el-dialog
      :visible.sync="dialogVisible"
      width="20%"
      title="添加或修改"
    >
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" status-icon label-width="100px" class="demo-ruleForm">
        <el-form-item label="巡检员名称">
          <el-input v-model="ruleForm.inspectorName" type="text"/>
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input v-model="ruleForm.inspectorPhone" type="text"/>
        </el-form-item>
        <el-form-item label="登入密码" >
          <el-input v-model="ruleForm.password" type="password"/>
        </el-form-item>
        <el-form-item label="管辖区域" >
          <el-tag
            v-for="tag in QueryRoadVO"
            :key="tag.roadName"
            closable>
            {{ tag.roadName }}
          </el-tag>
        </el-form-item>
        <el-form-item label="状态" prop="age">
          <el-switch
            v-model="ruleForm.state"
            style="display: block"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-text="禁用"
            inactive-text="正常"
            active-value="1"
            inactive-value="0"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>

    </el-dialog>

    <el-pagination
      :current-page="currentPage"
      :page-size="pageSize"
      :total="total"
      :page-sizes="[1, 2, 3, 4,5]"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"/>
  </div>
</template>
<script>
import inspector from '@/api/inspector'
export default {
  data() {
    var validateinspectorName = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('名称不能为空'))
      } else {
        callback()
      }
    }
    var validatestatus = (rule, value, callback) => {
      if (value === '') {
        return callback(new Error('状态不能为空'))
      } else {
        callback()
      }
    }
    var validatepassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        callback()
      }
    }
    var validateinspectorPhone = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入手机号'))
      } else {
        callback()
      }
    }
    return {
      ruleForm: {
        password: '',
        inspectorName: '',
        inspectorPhone: '',
        status: ''
      },
      rules: {
        password: [
          { validator: validatepassword, trigger: 'blur' }
        ],
        inspectorName: [
          { validator: validateinspectorName, trigger: 'blur' }
        ],
        inspectorPhone: [
          { validator: validateinspectorPhone, trigger: 'blur' }
        ],
        status: [
          { validator: validatestatus, trigger: 'blur' }
        ]
      },
      dataList: [],
      listLoading: true, // 加载数据
      queryInspectorDTO: {}, // 查询条件对象
      currentPage: 1, // 当前页
      pageSize: 10, // 每页记录数
      total: null,
      imageUrl: null,
      drawer: false, // 抽屉
      direction: 'ltr', // 抽屉打开的方向
      QueryInspectorVO: {},
      inspectorOrderList: [],
      dialogVisible: false, // 表单弹窗
      QueryRoadVO: [],
      inspectorDetailedStatisticsVO: {}
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 每页记录数发生变化
    handleSizeChange(size) {
      this.pageSize = size
      this.getList()
    },
    // 当前页发生变化
    handleCurrentChange(current) {
      this.currentPage = current
      this.getList()
    },
    // 清空搜索框内容
    resetData() {
      this.queryInspectorDTO = {}
      this.getList()
    },
    // 页面初始化数据查询, 根据分页参数及搜索条件
    getList() {
      inspector.getList(this.currentPage, this.pageSize, this.queryInspectorDTO).then(res => {
        this.dataList = res.data.data
        this.total = res.data.total
      })
    },
    handleRemove(id, status) {
      console.log(id + status)
      inspector.disabled(id, status).then(res => {
        // 显示提示信息
        this.$message.success(res.message)
        // 重新查询分页数据
        this.getList()
      })
    },
    handledetails(id) {
      inspector.QueryOrderByInspectorId(id).then(res => {
        this.inspectorOrderList = res.data
      })
      inspector.inspectordetails(id).then(res => {
        this.QueryInspectorVO = res.data
      })
      inspector.QueryInspectorDetailedStatisticsById(id).then(res => {
        this.inspectorDetailedStatisticsVO = res.data
      })
      this.drawer = true
    },
    handledelete(id) {
      inspector.deleteInspector(id).then(res => {
        // 显示提示信息
        this.$message.success(res.message)
        // 重新查询分页数据
        this.getList()
      })
    },
    handledsaveOrUpdate(id) {
      inspector.QueryRoad(id).then(res => {
        this.QueryRoadVO = res.data
        console.log(res.data)
      })
      console.log('111')
      inspector.QueryInspectorById(id).then(res => {
        this.ruleForm = res.data
        console.log(res.data.password)
      })
      this.dialogVisible = true
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>
